<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-07-08 23:18:58
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-08 23:26:25
 * @FilePath: \react\02.虚拟DOM创建的两种方式\1.使用JSX创建虚拟DOM.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>1.hellReact</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于解析jsx为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <script type="text/babel">
        //1.创建虚机DOM
        const VDOM= (
            <h1><span>Hello,React,JSX</span></h1>
        )/***此处一定不要写引号,因为是虚拟DOM,因为不是字符串********/
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('root'))
        </script>
</body>

</html>